<template>
  <div class="sc_main">
    <van-nav-bar title="客服">
      <img
        src="~assets/image/arrow_left.png"
        alt=""
        width="20"
        height="20"
        slot="left"
        @click="ivBack"
      />
    </van-nav-bar>
    <div class="item" @click="callPhone(preUserPhone)">
      <div class="item-left">
        <img
          src="~assets/image/icon_yqc_customer1.png"
          width="24"
          height="24"
          alt=""
        />
        <p class="tui">我的推荐人</p>
      </div>
      <p>
        手机号:
        <span>{{ preUserPhone }}</span>
      </p>
      <img src="../../assets/image/arr_rigth.png" width="9" height="15px" />
    </div>
    <div
      class="item"
      v-for="item in dataList"
      :key="item.uid"
      :class="item.uid === 2 ? 'cobyOrderSn2' : ''"
      @click="getItemClick(item.uid)"
      :data-clipboard-text="item.uid != 2 ? '' : oemInfo.number"
    >
      <div class="item-left">
        <img :src="item.img" width="25" height="25" />
        <p class="tui">{{ item.text }}</p>
      </div>

      <img src="../../assets/image/arr_rigth.png" width="9" height="15px" />
    </div>
  </div>
</template>
<script>
import { queryOemInfoApi } from "network/ApiServe";

export default {
  created() {
    this.preUserPhone = localStorage.getItem("preUserPhone");
    this.brandId = localStorage.getItem("brandId");
  },
  data() {
    return {
      oemInfo: {
        number: "",
      },
      copy: "",
      dataList: [
        {
          uid: 1,
          text: "在线客服",
          img: require("assets/image/icon_yqc_customer2.png"),
        },
        {
          uid: 2,
          text: "微信",
          img: require("assets/image/icon_yqc_customer3.png"),
        },
        {
          uid: 3,
          text: "投诉建议",
          img: require("assets/image/icon_yqc_customer4.png"),
        },
        {
          uid: 4,
          text: "常见问题",
          img: require("assets/image/icon_yqc_customer5.png"),
        },
      ],
    };
  },
  mounted() {
    this.getOemInfo();
  },
  methods: {
    ivBack() {
      this.$router.back(-1);
    },
    callPhone(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
    },
    getItemClick(index) {
      switch (index) {
        case 1:
          if (this.oemInfo.brandPhone != null) {
            this.callPhone(this.oemInfo.brandPhone);
          } else {
            this.$toast("请联系管理人员");
          }
          break;
        case 2:
          let _this = this;
          let clipboard = new _this.clipboard(".cobyOrderSn2");
          console.log("clipboard,", clipboard);
          clipboard.on("success", function () {
            _this.$toast("微信复制成功，请往前微信添加好友功能");
          });
          clipboard.on("error", function () {
            _this.$toast("复制失败，请联系管理人员");
          });
          break;
        case 3:
          this.$router.push("/feedback");
          break;
        case 4:
          this.$router.push({
            name: "Problem",
            params: {
              title: "常见问题",
            },
          });
      }
    },
    getOemInfo() {
      queryOemInfoApi(this.brandId)
        .then((res) => {
          console.log("queryOemInfoApi", res);
          console.log("androidDownload:", res.result.androidDownload);
          console.log("androidDownloadUrl", res.result.androidDownloadUrl);
          if (res.resp_code === "000000") {
            if (res.result != null) {
              this.oemInfo = res.result;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.item {
  align-items: center;
  width: 355px;
  background-color: #fff;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  align-content: center;
  text-align: center;
  margin: 10px auto;
  padding: 10px 10px;
  border-radius: 9px;
  color: #444;
}
.item-left {
  display: flex;
  align-items: center;
}
.tui {
  margin-left: 8px;
}
.item span {
  color: red;
}
</style>